<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
<!--    JS加载的方式2:内联脚本语句-->
<!--    <script> JS脚本语句 </script>-->
    <script>
        // 单行注释
        /*
            多行注释
        */
        /**
         * 文档注释
         */

    //    JS方法(函数)定义
    //     function 函数名(参数列表){ 定义方法体 }
        function showTip(){
            alert("内联脚本提示消息")
        }
    //    JS 内联脚本语句的定义,存在两种执行方式
    //    方式1: 自动执行(调用执行)
    //     showTip(); // 在脚本加载完成时,直接运行脚本语句
    //    方式2: 句柄执行(html元素的事件执行)
    </script>
<!--    JS加载的方式3:外联脚本文件的导入 -->
<!--    通过 <script></script> 脚本资源标签定义 src 资源指向完成文件资源的加载  -->
<!--    src属性只有在载入符合javascript语法的外部文件时,才会有效执行脚本  -->
<!--    因为现代浏览器为保证浏览器运行安全,会阻止非.js结尾文件的脚本载入  -->
    <script src="./js/01.js"></script>
<!--    当 script 标签使用 src 属性时,不能接着定义内联脚本 ,虽然不报错,但不会加载和执行-->
<!--    <script src="./js/01.js">-->
<!--        function showTip3(){-->
<!--            alert("提示消息")-->
<!--        }-->
<!--    </script>-->
<!--    虽然 script 标签在使用src属性时,属于资源载入,也不能定义内联脚本,但依然不可以使用非闭合标签规则 -->
<!--    <script src="./js/01.js" />-->
</head>
<body>
<!--    JS加载的方式1:行内表达式-->
<!--    HTML元素的事件句柄触发JS的动态脚本功能-->
<!--    事件句柄：html的事件属性 -->
<!--    事件句柄=“javascript:JS的简单方法”-->
<!--    alert 是JS的内置提示窗口方法，通过传入字符串描述消息
            js 的字符串定义具有三种定义方法
                '字符串' , "字符串" , `模板字符串`
-->
    <input type="button" onclick="javascrtip:alert('行内脚本提示消息')" value="点击提示">
    <br><br>
<!--    方式2: 句柄执行(html元素的事件执行)-->
    <input type="button" onclick="showTip()" value="点击提示">
    <br><br>
    <input type="button" onclick="showTip2()" value="点击提示">
    <br><br>
    <input type="button" onclick="showTip3()" value="点击提示">
</body>
</html>